import React, { useState ,useEffect} from 'react'
import { Area, Field } from 'react-vant'
import { areaList } from '@vant/area-data'
import { Form, Button, Input } from 'react-vant';
import {connect} from "react-redux"
import {bindActionCreators} from "redux"
import * as action from "../action/index"
import {useNavigate,useLocation} from "react-router-dom"

function Addadress(props) {
    const location = useLocation()
    console.log(location.state);
    const navigate =useNavigate()
    const [value, setValue] = React.useState(['220000', '220300', '220303'])
    const [address, setAddress] = useState("")
    const [form] = Form.useForm()
    console.log(form);
    useEffect(()=>{
        location.state &&  form.setFieldsValue(location.state)
    },[])
    const onFinish = values => {
        
        // 点击提交按钮需要判断执行新增逻辑还是编辑逻辑
        values.address = address
        // console.log(values)
        if (location.state.isadd === "新增") {
            props.addaddressfn(values)
        } else {
            props.editaddressfn(values,location.state.index)
        }
      
        navigate('/address')
    }
    return (
        <div>
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    tooltip={{
                        message:
                            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
                    }}
                    intro='确保这是唯一的用户名'
                    rules={[{ required: true, message: '请填写用户名' }]}
                    name='name'
                    label='性名'
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填电话' }]}
                    name='phone'
                    label='电话'
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写地址' }]}
                    name='address'
                    label='地址'
                >
                    <Area
                        popup={{
                            round: true,
                        }}
                        title='标题'
                        value={value}
                        areaList={areaList}
                        onConfirm={(a, b) => {
                            let str = ""
                            b.forEach((item, index) => {
                                str += item.text
                            })
                            setAddress(str)
                        }}
                    >
                        {(_, selectRows, actions) => {
                            return (
                                <Field
                                    label='选择地区'
                                    value={selectRows.map(row => row?.text).join(',')}
                                    onClick={() => actions.open()}
                                />
                            )
                        }}
                    </Area>
                </Form.Item>


            </Form>



        </div>
    )
}
let mapStateToProps = (state)=>{
    return {
        ...state.shopreducer
    }
}
let mapDispatchToprops = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToprops)(Addadress) 